<template>
  <view class="user">
    <view class="u-text-right u-font-26 u-p-t-24" @click="$goto('/pages/mine/setting')">设置</view>

    <view class="userinfo" @click="$goto('/pages/account/login')">
      <u-avatar size="120" src="https://picsum.photos/id/884/200/200"></u-avatar>
      <view class="info">
        <view class="name">182****4567</view>
        <view class="sub">客户经理编号: 143EDAEC</view>
      </view>
      <view class="toggle" style="background: url(/static/images/mine/qiehuanshenfen.png) center / cover;">切换身份</view>
    </view>

    <view class="items">
      <view class="item" @click="$goto('/pages/mine/yue')">
        <view class="num">0</view>
        <view class="text">余额</view>
      </view>
      <view class="item" @click="$goto('/pages/mine/jifen')">
        <view class="num">0</view>
        <view class="text">积分</view>
      </view>
      <view class="item" @click="$goto('/pages/mine/coupons')">
        <view class="num">0</view>
        <view class="text">优惠券</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss">
  .user {
    width: 750rpx;
    height: 350rpx;
    background: #ffb849;
    color: #fff;
    padding: 0 32rpx;

    .items {
      display: flex;
      justify-content: space-around;
      align-items: center;

      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .num {
        font-size: 36rpx;
      }

      .text {
        font-size: 22rpx;
      }
    }
  }

  .userinfo {
    width: 100%;
    height: 180rpx;
    display: flex;
    align-items: center;

    .info {
      width: 430rpx;
      height: 120rpx;
      padding: 0 16rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }

    .name {
      font-size: 36rpx;
      line-height: 60rpx;
    }

    .sub {
      font-size: 24rpx;
    }
  }

  .toggle {
    width: 122rpx;
    height: 62rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22rpx;
  }
</style>
